<template>
  <span>
    <svg
      t="1734835839166"
      class="icon"
      viewBox="0 0 1242 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="15659"
      :style="[styleCpd]"
    >
      <path
        d="M1173.937666 966.50009H375.822153a58.181663 58.181663 0 0 1 0-115.678836h798.800003a58.181663 58.181663 0 1 1 0 115.678836zM0.037062 919.954759A101.304542 101.304542 0 1 0 101.341604 821.388178 101.304542 101.304542 0 0 0 0.037062 919.954759z m1173.900604-362.779778H375.822153a58.181663 58.181663 0 0 1 0-115.678835h798.800003a58.181663 58.181663 0 1 1 0 115.678835zM0.037062 510.629651A101.304542 101.304542 0 1 0 101.341604 410.694089 101.304542 101.304542 0 0 0 0.037062 510.629651z m1173.900604-362.779779H375.822153a58.181663 58.181663 0 1 1 0-115.678835h798.800003a58.181663 58.181663 0 1 1 0 115.678835zM0.037062 101.304542A101.304542 101.304542 0 1 0 101.341604 0 101.304542 101.304542 0 0 0 0.037062 101.304542z"
        p-id="15660"
      ></path>
    </svg>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { IIconProps } from './type'
const props = withDefaults(defineProps<IIconProps>(), {
  size: 18,
  color: 'rgba(255, 255, 245, 0.86)'
})

// 计算样式
const styleCpd = computed(() => {
  return `fill:${props.color};width:${props.size}px;height:${props.size}px;`
})
</script>

<style scoped>
span {
  display: inline-block;
  box-sizing: border-box;
  padding: 0 10px;
}

.icon {
  cursor: pointer;
}

.icon:hover {
  opacity: 0.5;
}
</style>
